<template>
  <el-row style=" min-height: 500px;">
    <el-col :span="3">
      <el-steps style="height: 500px;" :active="state.active" direction="vertical" align-center>
        <el-step title="导入考生数据"/>
        <el-step title="设置数据对应关系"/>
        <el-step title="设置场次"/>
        <el-step title="生成模板"/>
      </el-steps>
      <el-button style="margin-top: 12px" :disabled="state.active==1" @click="()=>state.active--">上一步</el-button>
      <el-button style="margin-top: 12px" :disabled="state.active==4" @click="()=>state.active++">下一步</el-button>
    </el-col>
    <el-col :span="19">
      <div v-show="state.active==1">
        <el-row class="mb-4">
          <el-button :onclick="ExportXlsx">下载模板</el-button>
          <el-button type="primary" :onclick="uploadDataServer">
            导入报名数据
            <el-icon class="el-icon--right">
              <Upload/>
            </el-icon>
          </el-button>
        </el-row>
        <el-table :data="state.tableData.data">
          <el-table-column
              v-for="item in state.colunm"
              :prop="item.key"
              :key="item.key"
              :label="item.lable"
          >
          </el-table-column>
        </el-table>
        <div class="block flex justify-end" v-if="state.tableData.total > 0">
          <el-pagination
              v-model:currentPage="state.searchInput.PageIndex"
              v-model:page-size="state.searchInput.PageSize"
              :page-sizes="[10, 50, 200, 1000]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="getData"
              @current-change="getData"
              :total="state.tableData.total"
          />
        </div>
        <DataUpload
            ref="dataUpload"
            @childClick="dataUploadchildClick"
            accept=".xlsx"
            title="上传数据"
        ></DataUpload>
      </div>
      <div v-show="state.active==2">
        <el-row :gutter="24" justify="start" style="text-align: left;">
          <div v-for="(item,index) in state.SelectData" :key='index' style="margin-top: 5px;width: 100%;">
            <el-col :span="24"><Select
                :itemKey="item.key"
                v-model:type="item.type"
                v-model:value="item.value"
                v-model:selectValue="item.selectValue"
                :name="item.title"
                :colunm="state.colunm"/></el-col>
          </div>
        </el-row>
      </div>
      <div v-show="state.active==3">
        <el-row class="mb-4">
          <el-button style="margin-top: 12px" @click="addExamTime">添加场次</el-button>
        </el-row>
        <el-table :data="state.tableTimeData.data">
          <el-table-column prop="examTimeCode" label="场次代码" width="100">
            <template #default="scope">
              <span v-show="!scope.row.Edit">{{ scope.row.examTimeCode }}</span>
              <el-input v-show="scope.row.Edit" size="mini"
                        v-model="scope.row.examTimeCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="examTimeName" label="场次名称" width="100">
            <template #default="scope">
              <span v-show="!scope.row.Edit">{{ scope.row.examTimeName }}</span>
              <el-input v-show="scope.row.Edit" size="mini"
                        v-model="scope.row.examTimeName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="考试开始时间">
            <template #default="scope">
              <span v-show="!scope.row.Edit">{{ scope.row.startTime }}</span>
              <div v-show="scope.row.Edit">
                <el-date-picker
                    format="YYYYMMDDHHmmss"
                    value-format="YYYYMMDDHHmmss"
                    v-model="scope.row.startTime"
                    type="datetime"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="考试结束时间">
            <template #default="scope">
              <span v-show="!scope.row.Edit">{{ scope.row.endTime }}</span>
              <div v-show="scope.row.Edit">
                <el-date-picker
                    format="YYYYMMDDHHmmss"
                    value-format="YYYYMMDDHHmmss"
                    v-model="scope.row.endTime"
                    type="datetime"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" v-show="!scope.row.Edit" size="small" @click="editColunmData(scope.row)">编辑
              </el-button>
              <el-button type="danger" :icon="state.Delete" circle v-show="!scope.row.Edit"
                         @click="removeColunmData(scope.$index)"/>
              <el-button type="primary" v-show="scope.row.Edit" size="small" @click="openEditColumn(scope.row)">保存
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="state.active==4">
        <el-form :model="state.ExamData" label-width="120px">
          <el-form-item label="任务全称">
            <el-input v-model="state.ExamData.quancheng"/>
          </el-form-item>
          <el-form-item label="任务简称">
            <el-input v-model="state.ExamData.jiancheng"/>
          </el-form-item>
          <el-form-item label="考试年月">
            <el-date-picker
                v-model="state.ExamData.kaikaonianyue"
                type="month"
                format="YYYYMM"
                value-format="YYYYMM"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item>
            <el-button :onclick="Save">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, Ref, onMounted} from "vue";
import {Delete} from '@element-plus/icons-vue'
import * as XLSX from "xlsx";
import DataUpload from "@/components/DataUpload.vue";
import Select from "@/components/Select.vue";
import {el} from "element-plus/es/locale";
import axios from "axios";
import {ElMessage} from "element-plus";

export default defineComponent({
  components: {
    DataUpload,
    Select
  },
  setup() {
    onMounted(async () => {
      console.log(123);
    });
    type FileItem = {
      examTimeCode: any;
      examTimeName: any;
      startTime: any;
      endTime: any;
      Edit: any;
    }
    const state = reactive({
      Delete: Delete,
      tableData: {data: [], total: 0},
      tableTimeData: {data: [] as FileItem[], total: 0},
      searchInput: {PageIndex: 1, PageSize: 10},
      colunm: [{key: "", lable: ""}],
      tempData: [],
      active: 1,
      ExamData: {quancheng: '', jiancheng: '', kaikaonianyue: ''},
      SelectData: [
        {key: 'zkzh', type: '', value: '', selectValue: '', title: '准考证号'},
        {key: 'zjlb', type: '', value: '', selectValue: '', title: '证件类别'},
        {key: 'zjhm', type: '', value: '', selectValue: '', title: '证件号码'},
        {key: 'ksxm', type: '', value: '', selectValue: '', title: '考生姓名'},
        {key: 'xb', type: '', value: '', selectValue: '', title: '性别'},
        {key: 'ss', type: '', value: '', selectValue: '', title: '省市'},
        {key: 'kq', type: '', value: '', selectValue: '', title: '考区'},
        {key: 'kdh', type: '', value: '', selectValue: '', title: '考点号'},
        {key: 'kdmc', type: '', value: '', selectValue: '', title: '考点名称'},
        {key: 'kch', type: '', value: '', selectValue: '', title: '考场号'},
        {key: 'kchdz', type: '', value: '', selectValue: '', title: '考场地址'},
        {key: 'zwh', type: '', value: '', selectValue: '', title: '座位号'},
        {key: 'chc', type: '', value: '', selectValue: '', title: '场次'}
      ]
    });
    const dataUpload = ref(null) as Ref;

    const uploadDataServer = () => {
      dataUpload.value.childMethod(state.colunm);
    };
    const getData = () => {
      const tempData: any = [];
      state.tempData.forEach((value, index) => {
        if (
            index >=
            (state.searchInput.PageIndex - 1) * state.searchInput.PageSize &&
            index < state.searchInput.PageIndex * state.searchInput.PageSize
        ) {
          tempData.push(value);
        }
      });
      state.tableData.data = tempData;
      state.tableData.total = state.tempData.length;
    };
    const dataUploadchildClick = (data, colunm) => {
      state.colunm = colunm;
      state.tempData = data;
      getData();
      dataUpload.value.cancel();
    };
    const ExportXlsx = () =>  {
      // 创建工作表
      const data = XLSX.utils.json_to_sheet([
        {
          名称: "",
          地址: "",
        },
      ]);
      // 创建工作簿
      const tHeader = XLSX.utils.book_new();
      // 将工作表放入工作簿中
      XLSX.utils.book_append_sheet(tHeader, data, "data");
      // 生成文件并下载
      XLSX.writeFile(tHeader, "test.xlsx");
    };
    const Save = () => {
      if (state.tempData.length == 0) {
        state.active=1;
        ElMessage.warning('请导入考生数据');
        return;
      }
      let CheckSelectData = true;
      state.SelectData.forEach((value, index) => {
        if (!value.type) {
          CheckSelectData = false
        }
      });
      if (!CheckSelectData) {
        state.active=2;
        ElMessage.warning('请设置完成数据对应关系');
        return;
      }
      if (state.tableTimeData.data.length==0){
        state.active=3;
        ElMessage.warning('请添加场次数据');
        return;
      }
      if (!state.ExamData.jiancheng||!state.ExamData.kaikaonianyue||!state.ExamData.quancheng){
        state.active=4;
        ElMessage.warning('请设置任务相关信息');
        return;
      }
      axios.post('/GenerateCheckTemplate', state)
          .then(function (response) {
            if (response.status == 200) {
              ElMessage.success(response.data);
              dataUpload.value.cancel();
              getData();
            } else {
              ElMessage.error(response.data)
            }
          })
    }
    const addExamTime = () => {
      const tempData = {} as FileItem;
      if (state.tableTimeData.data.length > 0) {
        tempData.examTimeCode = state.tableTimeData.data[state.tableTimeData.data.length - 1].examTimeCode + 1;
        tempData.examTimeName = state.tableTimeData.data[state.tableTimeData.data.length - 1].examTimeCode + 1;
      } else {
        tempData.examTimeCode = 1;
        tempData.examTimeName = 1;
      }
      tempData.examTimeName = "第" + tempData.examTimeName + "场";
      tempData.startTime = '';
      tempData.endTime = '';
      tempData.Edit = false;
      state.tableTimeData.data.push(tempData)
    }
    const editColunmData = (row) => {
      row.Edit = true;
    }
    const removeColunmData = (index) => {
      state.tableTimeData.data.splice(index, 1);
    }
    // 打开信息编辑
    const openEditColumn = (row) => {
      debugger;
      row.Edit = false;
    }
    return {
      state,
      dataUpload,
      uploadDataServer,
      dataUploadchildClick,
      onMounted,
      getData,
      ExportXlsx,
      Save,
      addExamTime,
      editColunmData,
      openEditColumn,
      removeColunmData
    };
  },
});
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>